<template>
  <div class="c-bg-sgray">
    <div class="c-pf c-w100 c-pz100 c-maxw640 c-pb10 c-bg-white" :class="isApp || $isWxApp() || $unenableTopNav() ? 'c-p-t0 c-pz1000':'c-p-t68'">
      <my-small-tabbar class="c-bg-white" :tabList="topTabList" tabHeight="64" :tabIndex="couponType" @changeTab="switchExchange"></my-small-tabbar>
    </div>
    <!-- 优惠券和代金券 -->
    <div v-if="couponType == 2 || couponType == 4" class="c-text-hidden">
      <div class="c-pf c-w100 c-pz100 c-maxw640" :class="isApp || $isWxApp() || $unenableTopNav() ? 'c-p-t64':'c-p-t132'">
        <div class="c-bg-white c-flex-row c-pt20 c-pb20">
          <div class="c-flex-row c-content-auto c-mh24 c-hh48">
            <div v-if="couponType == 2 || (couponType != 2 && item.index < 2)" :id="'statusItem' + item.index" v-for="(item) in tabList" :key="item.index" @click="changeStatus(item.index)" :class="used == item.index ? 'theme-bg-10 theme-fc' : 'c-bg-f2 c-fc-gray'" class="c-boxSizing-b c-flex-row c-flex-center c-flex-shrink0 c-mr20 c-ww120 c-hh44 c-br30 c-fs24">{{item.title}}</div>
          </div>
        </div>
      </div>

      <div class="c-ph24 c-pv20" :class="[isApp || $isWxApp() ? 'mt-140' : 'c-mt160']">
        <coupon-item-com v-for="(item,index) in valueVoucherList" :key="index" :couponInfo="item" class="c-mb20" :class="[item.giftStatus == 1 || item.giftStatus == 2 ? 'enable':'']">
          <!-- 代金券券码(已转赠的状态不显示) -->
          <template v-if="couponType == 4 && item.eRcdId && item.giftStatus != 2" v-slot:footerLeft>
            <div class="c-flex-row c-aligni-center c-flex-shrink0 c-hh40">
              <div class="c-fs20 c-fc-gray">券码:{{ item.eRcdId }}</div>
              <span class="c-fs20 c-fc-xblack c-ml16" @click.stop="copyText(item.eRcdId)">复制</span>
            </div>
          </template>
          <!-- 转赠中或已经转赠 -->
          <template v-if="item.giftStatus == 1 || item.giftStatus == 2" v-slot:footerRight>
            <div v-if="used == 2 || used == 3" class="c-fs20 c-ww100 c-hh40 c-br20 c-ml20 c-flex-row c-flex-center xmlred-bd1 c-flex-shrink0 c-bg-xmlred c-fc-white c-ml20" @click.stop="goGiftTransfer(item)">查看</div>
          </template>
          <!-- 未使用 -->
          <template v-else v-slot:footerBtn>
            <div v-if="(item.status != 3 && used == -2 && item.enableGift == 1 && item.BindServiceProvider == -1 && (item.receiveTime < item.giftTime))" class="c-boxSizing-b c-fs20 c-fc-xmlred c-ww100 c-hh40 c-br20 c-ml20 c-flex-row c-flex-center xmlred-bd1 c-flex-shrink0 c-ml20" @click.stop="openSharePopup(item)">转赠</div>
          </template>
          <!-- 转赠中或已经转赠 -->
          <div v-if="item.giftStatus == 1 || item.giftStatus == 2" class="c-pa c-p-t0 c-p-r0 c-pz1 c-fs18 c-ph16 c-hh28 c-flex-row c-flex-center c-br-tr20 c-br-bl12 c-ws-n c-lh18 theme-bg-10 theme-fc">{{item.giftStatus == 1 ? '转赠中':'已转赠'}}</div>
          <!-- 未使用 -->
          <div v-else-if="item.useStatus == -1 && item.status <= 2 && item.isCodeExpired != 1" class="c-pa c-p-t0 c-p-r0 c-pz1">
            <div v-if="item.tag == -1" class="c-fs18 c-ww64 c-hh28 c-flex-row c-flex-center c-br-tr20 c-br-bl12 bg-FF300C-10 c-fc-xmlred">快过期</div>
            <div v-else-if="item.tag == 0" class="c-fs18 c-ww64 c-hh28 c-flex-row c-flex-center c-br-tr20 c-br-bl12 bg-23DB85-10 c-fc-deepGreen">新人</div>
            <div v-else-if="item.tag == 1" class="c-fs18 c-ww64 c-hh28 c-flex-row c-flex-center c-br-tr20 c-br-bl12 bg-23DB85-10 c-fc-deepGreen">新到</div>
            <img v-else-if="item.tag == 2" src="../../../../public/i/wap/coupon/vip.png" class="c-w100 c-br-tr10">
            <img v-else-if="item.tag == 4" src="../../../../public/i/wap/coupon/svip.png" class="c-w100 c-br-tr10">
          </div>
        </coupon-item-com>
        <loading-status-tem :dataStatus="dataStatus" :noDataText="`您还没有${used == -2 ? '未使用' : used == -1 ? '已过期' : used == 2 ? '转赠中' : used == 3 ? '已转赠' : '已使用'}的优惠券哦`"></loading-status-tem>
      </div>
      <!-- <div class="c-bg-white c-flex-row c-justify-center c-aligni-center c-pv16 c-pf c-pz99 c-p-b0 c-w100 c-maxw640 c-ph24">
        <div class="theme-bg c-fc-white c-fs28 c-w100 c-hh64 c-br30 c-lh64 c-textAlign-c" @click="goValueVoucherList">领更多好券</div>
      </div> -->
    </div>
    <!-- 兑换券 -->
    <div v-if="couponType == 1" class="c-text-hidden">
      <div class="c-pf c-w100 c-pz100 c-maxw640" :class="isApp || $isWxApp() || $unenableTopNav() ? 'c-p-t64':'c-p-t132'">
        <div class="c-bg-white c-flex-row c-pt20 c-pb22">
          <div class="c-flex-row c-content-auto c-mh24 c-hh48">
            <div :id="'statusItem' + item.index" v-for="(item) in tabList" :key="item.index" @click="changeStatus(item.index)" :class="used == item.index ? 'theme-bg-10 theme-fc' : 'c-bg-f2 c-fc-gray'" class="c-boxSizing-b c-flex-row c-flex-center c-flex-shrink0 c-mr20 c-ww120 c-hh44 c-br30 c-fs24">{{item.title}}</div>
          </div>
        </div>
      </div>
      <div v-show="type == 0" class="c-ph24 c-pv30" :class="[isApp || $isWxApp() ? 'mt-140' : 'c-mt160']">
        <!-- 已使用，已过期(右边放空,不显示任何的操作按钮)-->
        <coupon-item-com v-for="(item,index) in valueVoucherList" :couponInfo="item" couponType="1" :key="index" class="c-mb20" :class="[item.giftStatus == 1 || item.giftStatus == 2 ? 'enable':'']">
          <!-- 券码(兑换券显示，已转赠的状态不显示) -->
          <template v-if="item.eRcdId && item.giftStatus != 2" v-slot:footerLeft>
            <div class="c-flex-row c-aligni-center c-flex-shrink0 c-hh40">
              <div class="c-fs20 c-fc-gray">券码:{{ item.eRcdId }}</div>
              <span class="c-fs20 c-fc-xblack c-ml16" @click.stop="copyText(item.eRcdId)">复制</span>
            </div>
          </template>
          <!-- 转赠中 已转赠-->
          <template v-if="item.giftStatus == 1 || item.giftStatus == 2" v-slot:footerRight>
            <div class="c-fs18 c-ww116 c-hh40 c-flex-row c-flex-center c-fc-white c-textAlign-c c-br30 c-bg-xmlred c-boxSizing-b c-ml20 c-fw-b" @click.stop="goGiftTransfer(item)">查看</div>
          </template>
          <!-- 未使用 底部按钮-->
          <template v-else-if="item.useStatus == -1 && item.status <= 2 && item.isCodeExpired != 1" v-slot:footerBtn>
            <div v-if="used == 2 || used == 3" class="c-fs18 c-ww116 c-hh44 c-flex-row c-flex-center c-fc-white c-textAlign-c c-br30 c-bg-xmlred c-boxSizing-b c-fw-b" @click.stop="goGiftTransfer(item)">查看</div>
            <div v-if="(item.status != 3 && used == -2 && item.enableGift == 1 && item.BindServiceProvider == -1 && (item.receiveTime < item.giftTime))" class="c-boxSizing-b c-fs20 c-fc-xmlred c-ww100 c-hh40 c-br20 c-ml20 c-flex-row c-flex-center xmlred-bd1 c-flex-shrink0 c-mr20" @click.stop="openSharePopup(item)">转赠</div>
          </template>
          <!-- 已经使用 -->
          <template v-else-if="item.useStatus ==1 && used == 1" v-slot:footerRight>
            <div @click="goItem(item.redeemType,item.courseType,item.redeemId, item.status, item.type, item.eRcdId, item.useStatus)" class="c-fs20 c-ww100 c-hh40 c-br20 c-ml20 c-flex-row c-flex-center xmlred-bd1 c-flex-shrink0 c-fc-xmlred c-ml20">{{item.status == 5 ? '已作废' : '已兑换'}}</div>
          </template>
          <!-- 转赠中或已经转赠 -->
          <div v-if="item.giftStatus == 1 || item.giftStatus == 2" class="c-pa c-p-t0 c-p-r0 c-pz1 c-fs18 c-ph16 c-hh28 c-flex-row c-flex-center c-br-tr20 c-br-bl12 c-ws-n c-lh18 c-fc-white theme-bg-10 theme-fc">{{item.giftStatus == 1 ? '转赠中':'已转赠'}}</div>
          <!-- 未使用 -->
          <div v-else-if="item.useStatus == -1 && item.status <= 2 && item.isCodeExpired != 1" class="c-pa c-p-t0 c-p-r0 c-pz1">
            <div v-if="item.tag == -1" class="c-fs18 c-ww64 c-hh28 c-flex-row c-flex-center c-br-tr20 c-br-bl12 bg-FF300C-10 c-fc-xmlred">快过期</div>
            <div v-else-if="item.tag == 0" class="c-fs18 c-ww64 c-hh28 c-flex-row c-flex-center c-br-tr20 c-br-bl12 bg-23DB85-10 c-fc-deepGreen">新人</div>
            <div v-else-if="item.tag == 1" class="c-fs18 c-ww64 c-hh28 c-flex-row c-flex-center c-br-tr20 c-br-bl12 bg-23DB85-10 c-fc-deepGreen">新到</div>
            <img v-else-if="item.tag == 2" src="../../../../public/i/wap/coupon/vip.png" class="c-w100 c-br-tr10">
            <img v-else-if="item.tag == 4" src="../../../../public/i/wap/coupon/svip.png" class="c-w100 c-br-tr10">
          </div>
        </coupon-item-com>
        <loading-status-tem :dataStatus="dataStatus" :noDataText="`您还没有${used == -2 ? '未使用' : used == -1 ? '已过期' : used == 2 ? '转赠中' : used == 3 ? '已转赠' : '已使用'}的兑换券哦`"></loading-status-tem>
      </div>
      <!-- <div class="c-bg-white c-flex-row c-justify-center c-aligni-center c-pv16 c-pf c-pz99 c-p-b0 c-w100 c-ph24 c-maxw640">
        <div class="theme-bg c-fc-white c-fs28 c-w100 c-hh64 c-br30 c-lh64 c-textAlign-c" @click="goValueVoucherList">领更多好券</div>
      </div> -->
    </div>
    <!-- 有价券 -->
    <div v-if="couponType == 6" class="c-text-hidden">
      <div class="c-pf c-w100 c-pz100 c-maxw640" :class="isApp || $isWxApp() || $unenableTopNav() ? 'c-p-t64':'c-p-t132'">
        <div class="c-bg-white c-flex-row c-pt20 c-pb20">
          <div class="c-flex-row c-content-auto c-mh24 c-hh48">
            <div :id="'statusItem' + item.index" v-for="(item) in tabList" :key="item.index" @click="changeStatus(item.index)" :class="used == item.index ? 'theme-bg-10 theme-fc' : 'c-bg-f2 c-fc-gray'" class="c-boxSizing-b c-flex-row c-flex-center c-flex-shrink0 c-mr20 c-ww120 c-hh44 c-br30 c-fs24">{{item.title}}</div>
          </div>
        </div>
      </div>

      <div class="c-ph24 c-pv20" :class="[isApp || $isWxApp() ? 'mt-140' : 'c-mt160']">
        <coupon-item-com v-for="(item,index) in valueVoucherList" v-if="valueVoucherList != null && valueVoucherList.length > 0" :key="index" :couponInfo="item" class="c-mb20" :class="[item.giftStatus == 1 || item.giftStatus == 2 ? 'enable':'']">
          <!-- 券码(兑换券显示，已转赠的状态不显示) -->
          <template v-if="item.type==1 && item.eRcdId && item.giftStatus != 2" v-slot:footerLeft>
            <div class="c-flex-row c-aligni-center c-flex-shrink0 c-hh40">
              <div class="c-fs20 c-fc-gray">券码:{{ item.eRcdId }}</div>
              <span class="c-fs20 c-fc-xblack c-ml16" @click.stop="copyText(item.eRcdId)">复制</span>
            </div>
          </template>
          <!-- 转赠中已经转赠 -->
          <template v-if="item.giftStatus == 1 || item.giftStatus == 2" v-slot:footerRight>
            <div v-if="used == 2 || used == 3" class="c-fs18 c-ww116 c-hh40 c-flex-row c-flex-center c-fc-white c-textAlign-c c-br30 c-bg-xmlred c-boxSizing-b c-ml20 c-fw-b" @click.stop="goGiftTransfer(item)">查看</div>
          </template>
          <!-- 未使用 -->
          <template v-else-if="item.useStatus== -1 && item.status <= 2 && item.isCodeExpired != 1" v-slot:footerBtn>
            <div v-if="used == 2 || used == 3" class="c-fs18 c-ww116 c-hh40 c-flex-row c-flex-center c-fc-white c-textAlign-c c-br30 c-bg-xmlred c-boxSizing-b c-ml20 c-fw-b" @click.stop="goGiftTransfer(item)">查看</div>
            <div v-if="(item.status != 3 && used == -2 && item.enableGift == 1 && item.BindServiceProvider == -1 && (item.receiveTime < item.giftTime))" class="c-boxSizing-b c-fs20 c-fc-xmlred c-ww100 c-hh40 c-br20 c-ml20 c-flex-row c-flex-center xmlred-bd1 c-flex-shrink0 c-ml20 c-fw-b" @click.stop="openSharePopup(item)">转赠</div>
          </template>
          <!-- 已经使用 -->
          <template v-else-if="item.useStatus ==1 && used == 1 && item.type == 1" v-slot:footerRight>
            <div @click="goItem(item.redeemType,item.courseType,item.redeemId, item.status, item.type, item.eRcdId, item.useStatus)" class="c-fs20 c-ww100 c-hh40 c-br20 c-ml20 c-flex-row c-flex-center xmlred-bd1 c-flex-shrink0 c-fc-xmlred c-ml20">{{item.status == 5 ? '已作废' : '已兑换'}}</div>
          </template>
          <!-- 转赠中或已经转赠 -->
          <div v-if="item.giftStatus == 1 || item.giftStatus == 2" class="c-pa c-p-t0 c-p-r0 c-pz1 c-fs18 c-ph16 c-hh28 c-flex-row c-flex-center c-br-tr20 c-br-bl12 c-ws-n c-lh18 c-fc-white bg-f64163">{{item.giftStatus == 1 ? '转赠中':'已转赠'}}</div>
          <!-- 未使用 -->
          <div v-else-if="item.useStatus == -1 && item.status <= 2 && item.isCodeExpired != 1" class="c-pa c-p-t0 c-p-r0 c-pz1">
            <div v-if="item.tag == -1" class="c-fs18 c-ww64 c-hh28 c-flex-row c-flex-center c-br-tr20 c-br-bl12 bg-FF300C-10 c-fc-xmlred">快过期</div>
            <div v-else-if="item.tag == 0" class="c-fs18 c-ww64 c-hh28 c-flex-row c-flex-center c-br-tr20 c-br-bl12 bg-23DB85-10 c-fc-deepGreen">新人</div>
            <div v-else-if="item.tag == 1" class="c-fs18 c-ww64 c-hh28 c-flex-row c-flex-center c-br-tr20 c-br-bl12 bg-23DB85-10 c-fc-deepGreen">新到</div>
            <img v-else-if="item.tag == 2" src="../../../../public/i/wap/coupon/vip.png" class="c-w100 c-br-tr10">
            <img v-else-if="item.tag == 4" src="../../../../public/i/wap/coupon/svip.png" class="c-w100 c-br-tr10">
          </div>
        </coupon-item-com>
        <loading-status-tem :dataStatus="dataStatus" :noDataText="`您还没有${used == -2 ? '未使用' : used == -1 ? '已过期' : used == 2 ? '转赠中' : used == 3 ? '已转赠' : '已使用'}的优惠券哦`"></loading-status-tem>
      </div>
      <div v-if="valuableCouponExists" class="c-bg-white c-flex-row c-justify-center c-aligni-center c-pv16 c-pf c-pz99 c-p-b0 c-w100 c-maxw640 c-ph24">
        <div class="theme-bg c-fc-white c-fs28 c-w100 c-hh64 c-br30 c-lh64 c-textAlign-c" @click="goValuableCouponList">去购省钱券</div>
      </div>
    </div>
    <!-- 快捷兑换 -->
    <div class="c-mh24 c-pb60" :class="[isApp || $isWxApp() ? 'c-pt50' : 'c-pt104']" v-if="couponType == 3">
      <div class="c-bg-white c-br20 c-text-hidden">
        <div class="c-pb40 c-bd-db1-mgray c-p">
          <div class="c-pv40 c-fs32 c-fc-sxblack c-textAlign-c">输入兑换码</div>
          <div class="c-mh40 c-pv20 c-bd1-mgray c-br40 c-text-hidden">
            <input type="text" v-model="exchangeCode" placeholder="请输入兑换码" class="c-textAlign-c c-block c-mlr-auto c-fs28 c-bd0" />
          </div>
          <div class="c-mh40 theme-bg c-fc-white c-fs28 c-pv20 c-br40 c-textAlign-c c-m-0auto c-mt40" @click="getCouponInfo">立即兑换</div>
          <!-- 小圆圈样式 -->
          <em class="c-pa c-bg-sgray c-pa-em c-pa-lb0"></em>
          <em class="c-pa c-bg-sgray c-pa-em c-pa-rb0"></em>
        </div>
        <div class="c-pt32 c-p c-pb30">
          <div class="c-pv30 c-fs24 c-fc-sblack c-flex-row c-justify-center">
            <div class="c-ww100 c-bd-b1-mgray c-h0 c-m-auto0"></div>
            <div class="c-ph24 c-fs24">兑换码说明</div>
            <div class="c-ww100 c-bd-b1-mgray c-h0 c-m-auto0"></div>
          </div>
          <!-- 小圆圈样式 -->
          <em class="c-pa c-bg-sgray c-pa-em c-pa-rt0"></em>
          <em class="c-pa c-bg-sgray c-pa-em c-pa-lt0"></em>
          <!-- 说明内容 -->
          <div class="c-fs22 c-lh40 c-fc-sblack c-ph30">
            <p>1、兑换码是由商家通过特定渠道发放给用户的一种优惠形式，作为兑换商家店铺内商品或优惠券的凭证，成功兑换后，将自动保存于用户的个人帐户中。</p>
            <p>2、同一个兑换码或者兑换码链接，只能被一个用户兑换，不可被其他用户重复兑换。</p>
            <p>3、使用兑换码兑换成功的优惠券支付订单时，优惠券金额高于订单金额的差额部分，不找零不兑换；优惠券金额低于订单金额的，差额部分由用户支付。</p>
            <p>4、详细内容请咨询商家。</p>
          </div>
        </div>
        <cj-popup round :closeable="true" v-model="showResult" class="c-ww450 c-pt70 c-pb40 c-flex-column c-aligni-center">
          <!-- 成功 -->
          <template v-if="codeStatus==8 || codeStatus==15">
            <div><i class="iconfont icon-project-success">&#xe7f7;</i></div>
            <div class="c-pv32 c-fs26 c-fc-xblack c-fw700">领取成功</div>
            <div class="c-lh c-fc-white c-fs32 c-mh40 c-pv20 c-textAlign-c c-br10 c-mt60 theme-bg c-ww300" @click="goDetail">查看商品</div>
          </template>
          <!-- 失败 -->
          <template v-else>
            <i class="iconfont icon-project-error">&#xe7f8;</i>
            <div class="c-pv32 c-fs26 c-fc-xblack c-fw700">领取失败</div>
            <div class=" c-fs18 c-fc-gray">{{couponStatus[codeStatus] ? couponStatus[codeStatus] : '领取失败'}}</div>
            <div class="c-lh c-fc-white c-fs32 c-mh40 c-pv20 c-textAlign-c c-br10 c-mt60 theme-bg c-ww300" @click="errorConfirm">确定</div>
          </template>
        </cj-popup>
      </div>
    </div>
    <share-com :isShow="isOpenSharePopup" @closeSharePopup="closeSharePopup" @changeStatus="changeStatus" :item="currentItem"></share-com>
    <my-loading :showLoading="isShowLoading"></my-loading>
  </div>
</template>

<script>
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
import MySmallTabbar from "@/components/templates/common/MySmallTabbar.vue";
import shareCom from "@/components/templates/myValueVoucher/shareCom.vue";
import couponItemCom from "@/components/templates/couponItemCom.vue";
import { exchangeDoDetail, goDetails } from "@/utils/goDetails.js"
import { getBindPhoneSetting } from "@/utils/checkUnBindPhone.js";
import { utilJs } from "@/utils/common.js";
let pageIndex = 1; //优惠券页码
let LIMIT = 10;
export default {
  name: "MyValueVoucher",
  components: {
    loadingStatusTem,
    MySmallTabbar,
    shareCom,
    couponItemCom
  },
  props: [],
  data() {
    return {
      theme: localStorage.getItem("colorName") || "mb5_default",
      companyAuth: JSON.parse(localStorage.getItem("companyAuth")),
      dataStatus: 'HAS_MORE_DATA',
      valueVoucherList: [],
      used: "",
      type: 0,
      couponType: 2,
      cType: "",
      isShowLoading: false,
      isApp: false,
      dataInfo: [],
      exchangeCode: null, // 兑换码
      loadingStatus: "LOAD_MORE", //显示加载更多LOAD_MORE 加载中 LOADING 没有更多 NO_MORE_DATA
      showResult: false, // 显示兑换结果 成功还是失败
      codeStatus: -999,
      isReciever: -1, //已领取者是否本人，1：本人领取 2：非本人领取
      page: 1, //兑换券页码
      topTabList: [{
        title: '快捷兑换',
        index: 3
      }, {
        title: '优惠券',
        index: 2,
      }, {
        title: '代金券',
        index: 4,
      }, {
        title: '兑换券',
        index: 1,
      }, {
        title: '有价券',
        index: 6,
      }],
      tabList: [{
        title: '未使用',
        index: -2,
      }, {
        title: '已使用',
        index: 1,
      }, {
        title: '已过期',
        index: -1,
      }, {
        title: '转赠中',
        index: 2,
      }, {
        title: '已转赠',
        index: 3,
      }
      ],
      isFromCoupons: '', // 是否从积分商城 积分兑好券 的商品详情页来
      couponStatus: {
        1: '该优惠券未开始',
        2: '进行中',
        3: '该优惠券已停止',
        4: '该优惠券已过期',
        5: '该优惠券已作废',
        6: '您已有权限，不用再领取',
        7: '您不符合领取要求',
        8: '领取成功',
        9: '您领取次数已达到上限',
        10: '该优惠券已被领取',
        11: '您来晚了，已被领取完了',
        12: '您已经领取过了',
        14: '系统异常',
        16: '兑换的商品不存在'
      },
      bindPhoneSetting: null,
      isOpenSharePopup: false, // 是否打开转赠分享弹窗
      currentItem: null, // 当前选中的优惠券
      valuableCouponExists: true,
      isShopGoods: false, //兑换单个商城商品
      shopInfo: ''
    };
  },
  created() {
    utilJs.appShare(this);
  },
  mounted() { },
  computed: {
  // 判断是否有顶部导航
    unenableTopNav() {
      return this.companyAuth && this.companyAuth.companyTopNav && this.companyAuth.companyTopNav.style && this.companyAuth.companyTopNav.style == 5
    },
  },
  methods: {
    toExchangeActivity(data = {}, rcdId, ticketId) {
      let goPathQuery = {
        activityId: data.activityId,
        ticketId: ticketId,
        isFree: data.isFree,
        isAudit: data.isAudit,
        recType: '',
        recRelateId: '',
        ticketName: data.name,
        minNum: 1,
        maxNum: 1,
        selectPrice: 0,
        rcdId: rcdId
      };
      //如果有关联表单，先跳表单页填写完再到填票页
      let path = '/activity/activityEnroll';
      let query = goPathQuery;
      // collectPage：1购买前 && 有关联表单 && 未填写过关联表单 && 有打开表单模块
      if (data.collectPage == 1 && data.isRelForm == true && data.hasFormLog == false && localStorage.getItem("showForm") == 1) {
        path = '/homePage/form';
        query = {
          cId: -1,
          extId: data.activityId,
          ckFrom: global.ckFrom.activity,
          relType: 7,
          type: 1,
          rcdId: rcdId,
          goBillQuery: encodeURIComponent(JSON.stringify(goPathQuery))
        }
      }
      this.$routerGo(this, "push", {
        path: path,
        query: query
      })
    },
    // 获取活动票券信息
    getActivityInfo(activityId, rcdId, ticketId) {
      utilJs.postMethod(`${global.apiurl}activities/mgticket`, { activityId: activityId, collageId: -1, groupId: -1 }, (res) => {
        const list = res.data || []
        const formRet = res.formRet || {}
        let ticketItem = list.filter(i => i.prodId == ticketId)[0] || {}
        ticketItem = {...formRet, ...ticketItem}
        let stime = ticketItem ? utilJs.getTimeByDate(ticketItem.startAt) : 0;
        let etime = ticketItem ? utilJs.getTimeByDate(ticketItem.endAt) : 0;
        let nowTime = (new Date()).getTime();
        if (stime && stime > nowTime) {
          this.$showCjToast({ text: "活动报名未开始，不支持兑换", type: "warn", time: 3000 });
          return
        }
        if (etime && etime < nowTime) {
          this.$showCjToast({ text: "活动报名已结束，不支持兑换", type: "warn", time: 3000 });
          return
        }
        if (!ticketItem.prodId) {
          this.$showCjToast({ text: "兑换的活动票已删除，不支持继续兑换", type: "warn", time: 3000 });
          return
        }
        this.toExchangeActivity(ticketItem, rcdId, ticketId)
      });
    },
    goGiftTransfer(item) {
      this.$routerGo(this, "push", {
        path: "/member/myValueVoucher/giftTransfer",
        query: {
          eRcdId: item.eRcdId,
          redeemCodeId: item.redeemCodeId,
          giftId: item.giftId, // 转赠记录id
        }
      });
    },
    openSharePopup(item) {
      this.currentItem = item;
      this.isOpenSharePopup = true;
    },
    closeSharePopup() {
      this.isOpenSharePopup = false;
    },
    copyText(id) {
      utilJs.copyText(id);
    },
    // 点击优惠券
    useCoupon(item) {
      if (this.couponType == 2 && (this.used >= 1 || this.used == -1 || item.status == 5 || item.future)) { //已作废
        return;
      }
      if (this.couponType == 4) {
        let q = {fromType: 2};
        if (item.eRcdId) {
          q.rcdId = item.eRcdId;
        } else {
          q.id = item.redeemCodeId;
        }
        this.$routerGo(this, "push", {
          path: "/homePage/shareholder/shCouponDetail",
          query: q
        }); //redeemCodeId优惠券id， rcdId：码库id
      } else {
        utilJs.postMethod(global.apiurl + "coupon/hasProds/" + item.eRcdId, {}, res => {
          if (res.prodInfo && JSON.stringify(res.prodInfo) === '[]' || item.redeemType == 27) {
            let toPath = item.redeemType == 25 ? '/mall/classification/classificationAll' : item.type == 4 ? '/homePage/booking/bookingList' : "/";
            this.$routerGo(this, "push", {
              path: toPath
            });
          } else {
            this.$routerGo(this, "push", {
              path: "/member/myExchange/toExchange",
              query: { eExchangeCode: item.eRcdId, cType: item.type }
            });
          }
        });
      }
    },
    // 切换兑换码页面
    switchExchange(couponType) {
      this.valueVoucherList = [];
      pageIndex = 1;
      this.couponType = couponType;
      this.used = -2;
      if (couponType != 3) {
        this.getList();
      }
    },
    //跳转到优惠券列表
    goValueVoucherList: function () {
      let q = {isList: 1}
      if (this.couponType == 1) {
        q.couponType = 1;
      }
      goDetails(this, global.ckFrom.coupon, '', q);
    },
    //跳转到有价券列表
    goValuableCouponList: function () {
      this.$routerGo(this, "push", {
        path: "/member/myExchange/valuableCouponList"
      });
    },
    //通过类别获取列表
    changeStatus(used) {
      if (used == this.used) {
        return;
      }
      window.scrollTo(0, 0);
      this.used = used;
      pageIndex = 1;
      this.valueVoucherList = [];
      this.$nextTick(() => {
        this.getList();
        let dom = document.getElementById('statusItem' + used) || '';
        if (!!dom) {
          dom.scrollIntoView();
        }
      })
    },

    //获取我的优惠券
    getList() {
      if (this.dataStatus == 'LOADING') {
        return;
      }
      this.dataStatus = 'LOADING';
      // this.used = this.isFromCoupons == 1 && this.couponType == 1 ? '' : this.used;
      let ct = this.couponType == 4 ? 2 : 1; // 1 知识付费的优惠券， 2股东优惠券
      // giftStatus  1=转赠中  2已转赠
      let moreUrl = this.used > 1 ? `&giftStatus=${this.used == 2 ? 1 : 2}` : `&used=${this.used}`
      utilJs.getMethod(
        global.apiurl + `coupon/myCouponList?page=${pageIndex}&limit=${LIMIT}&type=${this.couponType == 4 ? 2 : this.couponType}&couponType=${ct}` + moreUrl,
        res => {
          if (res.valuableCouponExists != 0) {
            this.valuableCouponExists = true;
          } else {
            this.valuableCouponExists = false;
          }
          if (pageIndex == 1) {
            this.valueVoucherList = res.data.data;
          } else {
            this.valueVoucherList = [...this.valueVoucherList, ...res.data.data];
          }
          for (let i = 0; i < this.valueVoucherList.length; i++) {
            let startT = new Date(this.valueVoucherList[i].startAt.replace(/-/g, '/')).getTime(this.valueVoucherList[i].startAt);
            let nowT = Date.parse(new Date());
            if (startT > nowT) {
              this.valueVoucherList[i].future = true
            }
          }
          if (res.data && res.data.data && (res.data.data.length < LIMIT)) {
            this.dataStatus = pageIndex == 1 && res.data.data.length == 0 ? 'NO_DATA' : 'NO_MORE_DATA';
          } else {
            this.dataStatus = 'HAS_MORE_DATA';
            pageIndex++;
          }
        },
        failRes => {
          this.dataStatus = 'DATA_ERROR';
        }
      );
    },
    // 兑换码跳转相应课程
    goItem(rType, courseType, rId, rStatus, cType, eId, useStatus) {
      console.log("goItemgoItemgoItem");
      if (rStatus == 5) { //已作废
        return;
      }
      if (useStatus == 1) {
        exchangeDoDetail(this, rId, rType, courseType);
      } else {
        this.$routerGo(this, "push", {
          path: "/member/myExchange/toExchange",
          query: { eExchangeCode: eId, cType: cType }
        });
      }
    },
    // 获取优惠券包信息
    getCouponInfo: function () {
      if (!this.exchangeCode) {
        this.$showCjToast({
          text: "请输入兑换码",
          type: "warn",
        })
        return;
      }
      let postUrl = `${global.apiurl}redeemCodes/verifyRedeemCode/${this.exchangeCode}`;
      utilJs.postMethod(postUrl, {}, res => {
        this.isShopGoods = res.isRedeemCodeToMall;
        this.shopInfo = res.prodInfo ? res.prodInfo : '';
        this.submitApply();
      })
    },
    // 输入兑换码
    submitApply() {
      if (this.bindPhoneSetting && this.bindPhoneSetting.getBind && utilJs.goBindMobile()) {
        return;
      }
      if (this.isShowLoading == true) {
        return;
      }
      let $this = this;
      // 点击立即兑换
      // if (!this.exchangeCode) {
      //   this.$showCjToast({
      //     text: "请输入兑换码",
      //     type: "warn",
      //     isShowMask: "true"
      //   })
      //   return;
      // }
      $this.isShowLoading = true;
      utilJs.postMethod(global.apiurl + 'redeemCodes/collectRcdId/' + this.exchangeCode, {source: 19}, function (res) {
        $this.codeStatus = res.status;
        // if ($this.codeStatus == 2) {
        //   if (res.loginUserId == res.recipientUserId) {
        //     $this.isReciever = 1; //本人领取
        //   } else {
        //     $this.isReciever = 2; //非本人领取
        //   }
        // }
        if (res.type == 1) {
          $this.cType = 1;
        } else {
          $this.cType = 2;
        }
        if (($this.codeStatus == 8 || $this.codeStatus == 15) && $this.shopInfo && $this.shopInfo.prodType == 12) {
          $this.isShowLoading = false;
          $this.getShopInfo($this.shopInfo.id, $this.exchangeCode);
          return
        }
        if ($this.cType == 1 && ($this.codeStatus == 8 || $this.codeStatus == 15) && $this.shopInfo && $this.shopInfo.prodType == global.ckFrom.activity) {
          $this.isShowLoading = false;
          $this.getActivityInfo($this.shopInfo.id, $this.exchangeCode, $this.shopInfo.subId);
          return
        }
        $this.showResult = true;
        $this.isShowLoading = false;
      }, failRes => {
        $this.isShowLoading = false;
      })
    },
    errorConfirm() {
      // 弹框点击确定
      this.exchangeCode = null;
      this.showResult = false;
    },
    getShopInfo(prodId, rcdId) {
      utilJs.getMethod(
        global.apiurl + "goods/goodsDetail?mgId=" + prodId + "&rcdId=" + rcdId,
        res => {
          if (res && res.redeemCodeData && res.redeemCodeData.status == 1) {
              this.shopInfo = res.goods;
              this.freeShipping = res.freeShipping;
              this.payAwardData = res.payAwardData;
              let shopInfo = [
                {
                  mgId: this.shopInfo.mgId,
                  mcId: "",
                  avatar: this.shopInfo.avatar ? this.shopInfo.avatar : "",
                  pointsDeduct: 0,
                  name: this.shopInfo.name,
                  price: 0,
                  originalPrice: this.shopInfo.originalPrice,
                  quantity: 1,
                  shopSpecInfo: "",
                  gsiiId: "",
                  postage: this.shopInfo.postage,
                  isMail: this.shopInfo.isMail,
                  isMallExpressDeliver: this.shopInfo.isMallExpressDeliver,
                  isMallOfflineDeliver: this.shopInfo.isMallOfflineDeliver,
                  stock: 1,
                  salesStock: "",
                  collageStock: "",
                  freeShipping: this.freeShipping,
                  isFlashSales: false,
                  isCollage: false,
                  pId: "",
                  noLimit: false,
                  vipDiscount: 0,
                  svipDiscount: 0,
                  agentDiscount: 0,
                  partnerDiscount: 0,
                  branchDiscount: 0,
                  isExchange: true,
                  limitType: -1,
                  limitNumber: 0,
                  purchasedNum: 0,
                  vipDiscountType: this.shopInfo.vipDiscountType || 1,
                  realPrice: this.shopInfo.price
                }
              ];
              sessionStorage.setItem("shopBuyInfo", JSON.stringify(shopInfo));
              let goPath = "/mall/shopSettlement/shopSettlement?shopNo=" + prodId + "&rcdId=" + rcdId;
              this.$routerGo(this, "push", {
                path: goPath
              });
          } else {
            this.$showCjToast({
              text: "兑换失败",
              type: "warn",
            });
          }
        }
      );
    },
    goDetail() {
      // if ((this.codeStatus == 8 || this.codeStatus == 15) && this.shopInfo && this.shopInfo.prodType == 12) {
      //   this.getShopInfo(this.shopInfo.id, this.exchangeCode);
      //   return
      // }
      // 点击查看商品
      this.exchangeCode = null;
      this.valueVoucherList = [];
      this.couponType = this.cType;
      if (this.couponType == 1) {
        if (this.codeStatus == 15 && !this.isShopGoods) {
          this.used = 1;
        } else {
          this.used = -2;
        }
      } else if (this.couponType == 2) {
        this.used = -2;
      }
      pageIndex = 1;
      this.type = 0;
      this.getList();
      this.showResult = false;
    },
       //分享
    wechatShare: function () {
      let title = '我的卡券';
      let shareImg = window.localStorage.getItem("shareLogo");
      let shareUrl =
        window.location.href.split("#")[0] +
        "#/member/myValueVoucher/myValueVoucher?refereeId=" +
        localStorage.getItem("userId");
      let shareDesc = window.localStorage.getItem("shareDesc");
      utilJs.wechatConfig(shareUrl, title, shareImg, shareDesc);
    },
    //手机端分享
    appShare: function () {
      let title = '我的卡券';
      let shareImg = window.localStorage.getItem("shareLogo");
      let shareUrl =
        window.location.href.split("#")[0] +
        "#/member/myValueVoucher/myValueVoucher?refereeId=" +
        localStorage.getItem("userId");
      let shareDesc = window.localStorage.getItem("shareDesc");
      utilJs.appShareTrue(title, shareImg, shareUrl, shareDesc);
    },
    //下拉获取更多
    windowScrollFunction() {
      utilJs.handleLoading(() => {
        if (this.dataStatus == 'HAS_MORE_DATA' && this.valueVoucherList.length > 0 ) {
          this.getList();
        }
      });
    },
  },
  activated() {
    //我的已领的优惠券
    setDocumentTitle("我的卡券");// eslint-disable-line
    this.companyAuth = JSON.parse(localStorage.getItem("companyAuth"));
    if (!(this.companyAuth != null && this.companyAuth.shareholderLevels > 0)) {
      let topTabList = this.topTabList.filter(item => item.title != '代金券');
      this.topTabList = topTabList;
    }
    if (this.$isStore()) {
      let topTabList = this.topTabList.filter(item => item.index != 6);
      this.topTabList = topTabList;
    }
    pageIndex = 1;
    this.isApp = utilJs.isIOSAppALL() || utilJs.isAndroidApp();
    this.dataStatus = 'HAS_MORE_DATA';
    this.type = '';
    this.valueVoucherList = [];
    this.valuableCouponExists = true;
    this.wechatShare();
    this.couponType = (this.$route.path == '/member/myExchange/exchangeIndex' || this.$route.query.type == 1) ? 1 : (localStorage.getItem("couponType") ? Number(localStorage.getItem("couponType")) : 2);
    if (this.$route.query.type == 1) { //从会员升级支付礼包的优惠券查看入口进来，直接展示兑换券
      this.type = 1;
    }
    if (this.$route.query.couponType == 1) {
      this.couponType = 1;
    } else if (this.$route.query.couponType == 2) {
      this.couponType = 2;
      this.type = 0;
    } else if (this.$route.query.couponType == 3) {
      this.couponType = 3;
    } else if (this.$route.query.couponType == 4) {
      this.couponType = 4;
    } else if (this.$route.query.couponType == 6) {
      this.couponType = 6;
    }
    this.cType = "";
    if ([1, 2, 4, 6].includes(this.couponType)) {
      if (!!this.$route.query.used) {
        this.used = this.$route.query.used;
      } else if (localStorage.getItem("used")) {
        this.used = localStorage.getItem("used");
      } else {
        this.used = -2;
      }
    }
    this.isFromCoupons = this.$route.query.isFromCoupons || '';
    this.isOpenSharePopup = false;
    this.currentItem = null;
    this.isShopGoods = false;
    this.shopInfo = '';
    this.showResult = false;
    window.addEventListener('scroll', this.windowScrollFunction);
    getBindPhoneSetting(global.ckFrom.coupon).then(res => {
      this.bindPhoneSetting = res;
    });
    this.getList();
  },
  deactivated() {
    this.dataStatus = 'NO_MORE_DATA';
    window.removeEventListener('scroll', this.windowScrollFunction);
    localStorage.setItem("couponType", this.couponType);
    if ([1, 2, 4].includes(this.couponType)) {
      localStorage.setItem("used", this.used);
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped lang="scss">
.c-br-l4{
  border-top-left-radius: 0.1rem;
  border-bottom-left-radius: 0.1rem;
}
.c-br-r4{
  border-top-right-radius: 0.1rem;
  border-bottom-right-radius: 0.1rem;
}
.coupon-left {
  background: url("../../../../public/i/wap/coupon/shareholderVoucherPay.png") no-repeat 100%;
  background-size: 100% 100%;
}
.coupon-used {
  background: url("../../../../public/i/wap/coupon/gray.png") no-repeat 100%;
  background-size: 100% 100%;
}
.exchange-left {
  background: url("../../../../public/i/wap/coupon/dui.png") no-repeat 100%;
  background-size: 100% 100%;
}
.c-lh64{
  line-height: 1.6rem;
}
em {
  font-style: normal;
}
.c-pa-em {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
}
.c-pa-lt0 {
  left: -0.25rem;
  top: -0.25rem;
}
.c-pa-lb0 {
  left: -0.25rem;
  bottom: -0.25rem;
}
.c-pa-rb0 {
  right: -0.25rem;
  bottom: -0.25rem;
}
.c-pa-rt0 {
  right: -0.25rem;
  top: -0.25rem;
}
.icon-project-success {
  color: #1fbb22;
  font-size: 2.5rem;
}
.icon-project-error {
  color: #999999;
  font-size: 2.5rem;
}
.c-mr-32{
  margin-right: -0.8rem;
}
.c-hh92{
  height: 2.3rem;
}
.c-p-t132{
  top: 3.3rem;
}
.c-hh76{
  height: 1.9rem;
}
.c-mt160{
  margin-top:4rem;
}
.c-mt30{
  margin-top: 0.75rem;
}
.c-pv17{
  padding-top: 0.425rem;
  padding-bottom: 0.425rem;
}
.c-br-bl30 {
  border-bottom-left-radius: 0.75rem;
}
.c-br-br30 {
  border-bottom-right-radius: 0.75rem;
}
.c-blr0 {
  border-left: 0;
  border-right: 0;
}
.c-pt104 {
  padding-top: 2.6rem;
}
.pb6 {
  padding-top: 0.15rem
}
.p-t76 {
  padding-top: 1.9rem
}
.icon-bg {
  background: rgba(247,65,99,0.20);
  color: #F64163;
}
.xmlred-bd1 {
  border: 1px solid #FF300C;
}
.bg-FF300C-10 {
  background: rgba(255, 48, 12, 0.1);
}
.bg-23DB85-10 {
  background: rgba(35, 219, 133, 0.1);
}
.c-bg-xmlred{
  background: #ff300c;
}
.mt-140{
  margin-top: 3.5rem;
}
/deep/ .coms-coupon-item{
  &.enable{
    filter:grayscale(0);
    .coms-coupon-status{
      display: none !important;
    }
  }
}

</style>
